<nz-card class="main-card">
  <nz-table
    #basicTable
    nzSize="middle"
    [nzData]="models"
    [nzTotal]="totalCount"
    nzShowSizeChanger
    nzShowQuickJumper
    [nzFrontPagination]="false"
    [(nzPageIndex)]="currentPage"
    [(nzPageSize)]="maxResultCount"
    [nzPageSizeOptions]="[10, 15, 50, 100, 1000, 5000]"
    [nzShowTotal]="paginationTotalTemplate"
    [nzShowSizeChanger]="true"
    [nzScroll]="{ x: '100%', y: '100%' }"
  >
    <ng-template #paginationTotalTemplate let-total>
      <div style="flex: 1">
        <div *ngIf="selectedCount > 0">
          <span
            nz-icon
            [nzType]="'info-circle'"
            [nzTheme]="'fill'"
            style="font-size: 14px; color: #08c; margin-right: 5px;"
          ></span>
          <span [innerHTML]="'BasicArchives::UI:SimplyList.Pagging.SelectedTips' | abpLocalization : selectedCount"></span>
          <nz-button-group nzSize="small" class="form-multactions">
            <button nz-button nzType="primary" nzGhost (click)="clearSelect()">{{ 'BasicArchives::UI:SimplyList.Pagging.SelectedTips.Buttons.Cancel' | abpLocalization }}</button>
          </nz-button-group>
          <nz-button-group nzSize="small" class="form-multactions">
            <button nz-button nzType="primary" (click)="analyze()" [disabled]="isAnyOperationInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.Analysis' | abpLocalization }}</button>
            <button nz-button nzType="primary" (click)="sync()" *ngIf="hasValidUnasyncCount() && !isSyncInProgress() && !isUpdateInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.Sync' | abpLocalization }}</button>
            <button nz-button nzDanger (click)="cancelSync()" *ngIf="isSyncInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.CancelSync' | abpLocalization }}</button>
            <button nz-button nzType="primary" (click)="update()" *ngIf="hasValidSyncedCount() && !isSyncInProgress() && !isUpdateInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.Update' | abpLocalization }}</button>
            <button nz-button nzDanger (click)="cancelUpdate()" *ngIf="isUpdateInProgress()">{{ 'BasicArchives::UI:ArchivesSync.Pagging.SelectedTips.Buttons.CancelUpdate' | abpLocalization }}</button>
          </nz-button-group>
        </div>
      </div>
      <div>{{ 'BasicArchives::UI:SimplyList.Pagging.PaggingTips' | abpLocalization : pageCount : total }}</div>
    </ng-template>
    <thead>
      <tr>
        <th
          nzWidth="60px"
          [nzLeft]="true"
          [nzChecked]="isAllSelected"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="targetAllSelect()"
        ></th>
        <th nzWidth="220px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.Name' | abpLocalization }}</th>
        <th nzWidth="220px">起止日期</th>
        <th nzWidth="120px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.U9Count' | abpLocalization }}</th>
        <th nzWidth="120px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.SyncCount' | abpLocalization }}</th>
        <th nzWidth="120px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.UnasyncCount' | abpLocalization }}</th>
        <th nzWidth="120px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.Count' | abpLocalization }}</th>
        <th nzWidth="400px">{{ 'BasicArchives::UI:ArchivesSync.Table.Columns.Progress' | abpLocalization }}</th>
      </tr>
    </thead>
    <tbody>
      <tr
        *ngFor="let model of basicTable.data; trackBy: track.by('id')"
        (click)="targetModelSelect(model)"
      >
        <td
          [nzLeft]="true"
          [nzChecked]="isModelSelected(model)"
          (nzCheckedChange)="targetModelSelect(model)"
        ></td>
        <td> {{ 'BasicArchives::ModelTitle:' + model.id | abpLocalization }} </td>
        <td> 
          <span *ngIf="model.daterange && model.daterange.length === 2">
            {{ model.daterange[0] | date:'yyyy-MM-dd' }}至{{ model.daterange[1] | date:'yyyy-MM-dd' }}
          </span>
          <span *ngIf="!model.daterange || model.daterange.length !== 2" style="color: #999;">
            未设置日期范围
          </span>
        </td>
        <td> 
          <nz-spin *ngIf="isModelAnalyzing(model.id)" nzSize="small"></nz-spin>
          <span *ngIf="!isModelAnalyzing(model.id)">{{ model.u9Count }}</span>
        </td>
        <td> 
          <nz-spin *ngIf="isModelAnalyzing(model.id)" nzSize="small"></nz-spin>
          <span *ngIf="!isModelAnalyzing(model.id)">{{ model.asyncCount }}</span>
        </td>
        <td> 
          <nz-spin *ngIf="isModelAnalyzing(model.id)" nzSize="small"></nz-spin>
          <span *ngIf="!isModelAnalyzing(model.id)">{{ model.unasyncCount }}</span>
        </td>
        <td> 
          <nz-spin *ngIf="isModelAnalyzing(model.id)" nzSize="small"></nz-spin>
          <span *ngIf="!isModelAnalyzing(model.id)">{{ model.count }}</span>
        </td>
        <td> 
          <div *ngIf="isModelSync(model.id) || isModelUpdating(model.id)">
            <nz-progress 
              [nzPercent]="getModelProgress(model.id).percentage" 
              [nzShowInfo]="true"
              [nzFormat]="progressFormat"
              nzSize="small"
              [nzStatus]="isModelUpdating(model.id) ? 'active' : 'normal'">
            </nz-progress>
          </div>
          <div *ngIf="!isModelSync(model.id) && !isModelUpdating(model.id) && getModelProgress(model.id).total > 0">
            <nz-progress 
              [nzPercent]="getModelProgress(model.id).percentage" 
              [nzShowInfo]="true"
              [nzFormat]="progressFormat"
              nzSize="small"
              nzStatus="success">
            </nz-progress>
          </div>
        </td>
        
      </tr>
    </tbody>
  </nz-table>
</nz-card>

<!-- 日期选择对话框 -->
<nz-modal
  [(nzVisible)]="isDatePickerVisible"
  nzTitle="选择分析日期范围"
  (nzOnCancel)="onDatePickerCancel()"
  [nzFooter]="null"
  nzWidth="500px">
  
  <div *nzModalContent>
    <div style="margin-bottom: 16px;">
      <p>请选择要分析的日期范围：</p>
    </div>
    
    <div style="margin-bottom: 16px;">
      <nz-range-picker
        [(ngModel)]="selectedDateRange"
        nzFormat="yyyy-MM-dd"
        style="width: 100%;">
      </nz-range-picker>
    </div>
    
    <div style="text-align: right;">
      <button nz-button (click)="onDatePickerCancel()">取消</button>
      <button 
        nz-button 
        nzType="primary" 
        (click)="onDatePickerOk()"
        [disabled]="!selectedDateRange || selectedDateRange.length !== 2"
        style="margin-left: 8px;">
        确定
      </button>
    </div>
  </div>
</nz-modal> 